import React, {useRef} from "react";
import { useTranslation } from "react-i18next";
import { Button, Modal, Form, Row, Col, Input, Select } from "antd";
import TipsIcon from "../../../../assets/images/dapp/tips.svg";
import {RegulationDesignMethod} from './regulationDesignMethod'
import { show } from "antd-mobile/es/components/dialog/show";
const { Option } = Select;
export const AddToken = React.forwardRef(
  ({ handleCloseAddToken, visible }, ref) => {
    const { t } = useTranslation();
    const regulationDesignMethodRef = useRef()

    const showRegulationDesignMethod = () => {
      regulationDesignMethodRef.current.open()
    }
    return (
      <Modal
        width={543}
        footer={null}
        open={visible}
        title={
          <div className="add-token-modal-title">
            <div className="title-text">
              {t("dappIndexRegulation.addTokenTitle")}
            </div>
            <img src={TipsIcon}></img>
          </div>
        }
        className="index-regulation-modal"
        onCancel={handleCloseAddToken}
      >
        <div className="add-token-form-box">
          <Form layout="vertical">
            <Row gutter={12}>
              <Col span={24}>
                <Form.Item label={t("dappIndexRegulation.tokenName")}>
                  <Input />
                </Form.Item>
              </Col>
              <Col span={24}>
                <Form.Item label={t("dappIndexRegulation.tokenAddress")}>
                  <Input />
                </Form.Item>
              </Col>
              <Col span={24}>
                <Form.Item label={t("dappIndexRegulation.tokenContract")}>
                  <Input />
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item label={t("dappIndexRegulation.DEXname")}>
                  <Select>
                    <Option value="1">PancakeSwap V3</Option>
                    <Option value="2">PancakeSwap V2</Option>
                    <Option value="3">UniSwap V3</Option>
                  </Select>
                </Form.Item>
              </Col>
              <Col span={16}>
                <Form.Item label={t("dappIndexRegulation.contractAddress2")}>
                  <Input />
                </Form.Item>
              </Col>
            </Row>
          </Form>
          <div className="footer-row">
            <Button className="confirm-btn">{t("dappIndexRegulation.confirmAdd")}</Button>
            <div className="tips" onClick={() => showRegulationDesignMethod()}>
                <div className="tips-text">{t("dappIndexRegulation.addTokenFooterTips") + ' >'} </div>
            </div>
          </div>
        </div>
        <RegulationDesignMethod ref={regulationDesignMethodRef}/>
      </Modal>
    );
  }
);
